<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(50) + 'px' }"
			v-show="!hiddenModel">
			<text>爆款拆剪</text>
		</view>

		<view :style="{ height: navTop + 'px' }"></view>

		<view class="flex-start-center " style="color:#333333" @click="navBack()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> 爆款拆剪</text>
		</view>
		
		<view class="search-content flex-start-center ">
		
			<uni-icons style="margin-left: 20rpx;" color="#00000048" type="search" size="24"></uni-icons>
		
			
			<input placeholder="请输入搜索内容" v-model="name" @input="changeInput" 
				style="line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
		
		
		</view>

		<view class="taskStatistics flex-between">
			<view class="flex-column">
				<view class="" style="color: #0184F0;font-weight: bold;font-size: 32rpx;">
					{{taskStatis.allCount}}
				</view>
				<view class="margin-top_16rpx">
					总任务数量
				</view>
			</view>
			<view class="flex-column">
				<view class="" style="color: #0184F0;font-weight: bold;font-size: 32rpx;">
					{{taskStatis.finishCount}}
				</view>
				<view class="" class="margin-top_16rpx">
					完成数量
				</view>
			</view> 
			<view class="flex-column">
				<view class="" style="color: #0184F0;font-weight: bold;font-size: 32rpx;">
					{{taskStatis.otherCount}}
				</view>
				<view class="" class="margin-top_16rpx ">
					失败数量
				</view>
			</view>
			
			<view class="flex-column">
				<view class="" style="color: #0184F0;font-weight: bold;font-size: 32rpx;">
					{{taskStatis.subCount}}
				</view>
				<view class="" class="margin-top_16rpx">
					作品数量
				</view>
			</view>
		</view>

		<view class="flex-between margin-top_30rpx">

			<view class="" @click="uploadNav(1)">
				<image class="localImg" :src="group3194" mode=""></image>
			</view>
			<view class="" @click="uploadNav(2)">
				<image class="localImg" :src="group3193" mode=""></image>
			</view>

		</view>

		<view class="tabsPosition margin-top_30rpx">
			<v-tabs v-model="cIndex" :tabs="tabs" bgColor="transparent" activeColor="#386EFF" @change="e=>changeTab(e)"
				fontSize="28rpx"></v-tabs>



		</view>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="hotSellingList" v-for="(item,index) in list" :key="index">
				<view class="font-overflow" style="width: 566rpx;font-size: 32rpx;">
					{{item.name}}
				</view>
				<view class="flex-start-center margin-top_16rpx padding-bottom_40rpx border-bottom-ECECEC">
					<view class=" flex margin-right_16rpx font-size_22rpx" :class="item.type==1?'yellowBtn':'waterBtn'">
						{{item.type==1?'本地':'网络'}}
					</view>
					<view class="" style="color: #999999;">
						创建时间：{{item.create_time}}
					</view>
				</view>
				<view class="flex-between" style="padding: 30rpx 0rpx 0;">
					<view class="" v-if="item.is_status!=3">
						剪辑数量 {{item.video_count}}
						<text v-if="item.mode!=0"
							style="color: #0184F0;margin-left: 20rpx;">{{ '(' + (item.mode == 1 ? '单镜头' : item.mode == 2 ? '多镜头' :item.mode == 3? '数字人口播':'') + ')' }}</text>
					</view>
					<view class="" style="padding: 0rpx 0rpx 0;" v-if="item.is_status==3">
						<view class="font-overflow" style="color: #FF0000; font-size: 26rpx;width: 400rpx;">
							失败原因：{{item.error_message}}
						</view>



					</view>
					<view class="flex" @click="delWorker(item)" v-if="item.is_status==3">
						<view class="" style="color: #FF3A3A;">

							删除
						</view>

						<image class="editImg margin-left_10rpx" :src="group3527Sever" mode=""></image>



					</view>



					<view class="flex" v-if="item.is_status==0">
						<view class="flex ">
							<view class="flex margin-right_16rpx" @click="editFn(item)">
								<view class="" style="color: #0184F0;">

									编辑
								</view>

								<image class="editImg margin-left_10rpx" :src="group3182" mode=""></image>



							</view>
							<view class="" style="color: #FF3A3A;" @click="delWorker(item)">

								删除
							</view>

							<image class="editImg " :src="group3527Sever" mode=""></image>



						</view>

					</view>

					<view class="flex " v-if="item.is_status!=3&&item.is_status!=0">


						<view class="flex" @click="viewWorks(item)" v-if="item.is_status==2">
							<view class="" style="color: #0184F0;">

								作品
							</view>

							<image class="editImg margin-left_10rpx" :src="group3528Sever" mode=""></image>



						</view>
						<view class="flex" @click="viewWorkss(item)" v-else>
							<view class="" style="color: #0184F0;">

								作品
							</view>

							<image class="editImg margin-left_10rpx" :src="group3528Sever" mode=""></image>



						</view>
						<view class="flex margin-left_16rpx margin-right_16rpx" @click="editFn(item)">
							<view class="" style="color: #0184F0;">
								编辑
							</view>

							<image class="editImg margin-left_10rpx" :src="group3182" mode=""></image>

						</view>
						<view class="flex" @click="delWorker(item)">
							<view class="" style="color: #FF3A3A;">

								删除
							</view>

							<image class="editImg margin-left_10rpx" :src="group3527Sever" mode=""></image>



						</view>
					</view>


				</view>


				<view class=" flex font-size_24rpx"
					:class="item.is_status==1?'signColorG':item.is_status==2?'signColorP':item.is_status==3?'signColorR':'signColorB'">

					{{item.is_status==1?'已拆剪':item.is_status==2?'已剪辑':item.is_status==3?'已失败':'拆剪中'}}
				</view>
			</view>
		</mescroll-body>


		<!-- 	<view class="hotSellingList">
			<view class="font-overflow" style="width: 566rpx;font-size: 32rpx;">
				若有一天，你的情绪不能用语言说出来那若有一天，你的情绪不能用语言说出来那
			</view>
			<view class="flex-start-center margin-top_16rpx padding-bottom_40rpx border-bottom-ECECEC">
				<view class="waterBtn flex margin-right_16rpx font-size_22rpx">
					网络
				</view>
				<view class="" style="color: #999999;">
					创建时间：2025.10.31 16:00
				</view>
			</view>
			<view class="" style="padding: 30rpx 0rpx 0;">
				<view class="" style="color: #FF0000; font-size: 26rpx;">
					失败原因：为提取到口播文案
				</view>



			</view>

			<view class="signColorR flex font-size_24rpx">
				失败
			</view>
		</view> -->

		<uv-tabbar :value="value" @change="changeTabbar" activeColor="#0547fb">
			<uv-tabbar-item text="首页">


				<template v-slot:active-icon>
					<image class="icon" src="/static/one/蒙版-1.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/one/蒙版.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="爆款拆剪">
				<template v-slot:active-icon>
					<image class="icon" src="/static/one/蒙版-1.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/one/蒙版.png"></image>
				</template>
			</uv-tabbar-item>


		</uv-tabbar>


	</view>


</template>

<script>
	export default {
		data() {
			return {
				value: 1,
				group3194: this.$imgs.group3194,
				group3193: this.$imgs.group3193,
				materialBg: this.$imgs.violet,
				group3183: this.$imgs.group3183,
				group3182: this.$imgs.group3182,

				group3528Sever: this.$imgs.group3528Sever,
				group3527Sever: this.$imgs.group3527Sever,

				navTop: '',
				tabs: [
					'全部',
					'拆剪中',
					'已拆剪',
					'已剪辑',
					'已失败',


				],
				cIndex: 0,
				taskStatis: {},
				list: [],
				hiddenModel: true, //显示影藏
				opacityStyle: 0, //透明度
				heightSystemss: "",
				user: uni.getStorageSync('user'),
				memberSetObj: {},
				name:''


			}
		},
		onLoad() {
			const app = getApp();
			this.navTop = app.globalData.navTop;
			this.taskStatisFn()
			this.createdgetSystemInfo()
			this.userInfos()
			this.memberSetFn()



		},
		onShow() {
			this.taskStatisFn()

			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});

		},



		onPageScroll(ev) {


			if (ev.scrollTop > 10) {
				let opacity = ev.scrollTop / 140

				// this.opacityStyle = opacity > 1 ? 1 : opacity
				this.opacityStyle = 1
				this.hiddenModel = false
				// this.createdgetSystemInfo();

			} else {
				this.hiddenModel = true
			}
		},
		computed: {


		},
		methods: {
			changeInput(e){
				console.log(e)
				this.name=e.detail.value
				
				setTimeout(() => {
					this.$nextTick(() => {
						this.mescroll?.resetUpScroll();
					})
				}, 500)
			},
			// 删除音频
			delWorker(obj) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该任务吗?',
					success: async res => {
						if (res.confirm) {

							const result = await this.$http.post({
								url: this.$api.taskDelClip,
								data: {
									uid: uni.getStorageSync('uid'),
									id: obj.id,
									type: 1
								}
							});
							if (result.errno == 0) {
								this.$sun.toast('删除成功');
								setTimeout(() => {
									this.$nextTick(() => {
										this.mescroll.resetUpScroll();
									});
								}, 2000);
							} else {
								this.$sun.toast(result.message, 'none');
							}
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			async memberSetFn() {
				const result = await this.$http.get({
					url: this.$api.memberSet,
					data: {


					}
				});
				if (result.errno == 0) {

					this.memberSetObj = result.data

					console.log(result.data)

				}
			},
			async userInfos() {
				const result = await this.$http.get({
					url: this.$api.userInfo,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					this.user = result.data;

					uni.setStorageSync('user', result.data);


				}
			},
			viewWorkss() {
				this.$sun.toast('剪辑中，请耐心稍等', 'none')
			},
			changeTab(e) {
				console.log(e)
				if (e) {
					this.cIndex = e
				} else {
					this.cIndex = ''
				}

				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});
			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
						console.log(navHeight, '==========================')

					},
					fail(err) {
						console.log(err);
					}
				});
			},

			viewWorks(item) {
				this.$sun.navGo('/pagesA/creatCenter/piecemeal/piecemealCenterDetail?info=' + encodeURIComponent(JSON
					.stringify({
						...item,
						task_type: 1,
						isTab: true,
					})))

			},
			editFn(item) {
				// console.log()
				if (this.user.is_member == 0 && this.memberSetObj.is_open == 1) {
					uni.showModal({

						title: '温馨提示',
						content: '你当前不是会员，请开通会员后享受该功能',
						confirmText: '开通会员',
						confirmColor: '#4A5EFF',
						success: async (res) => {
							if (res.confirm) {


								this.$sun.navGo('/pages/contactUs/memberCenter')

							} else if (res.cancel) {

							}
						}
					});
				} else {
					if (item.is_status != 0) {
						if (item.content&&item.content[0]) {



							this.$sun.navGo('/pagesA/creatCenter/piecemeal/uploadStepsOne?objs=' + encodeURIComponent(JSON
								.stringify(
									item)))
						} else {
							this.$sun.toast('当前任务无文案无法编辑请重新创建', 'none')
						}
					} else {
						this.faddishAnalysisFn(item.id)
					}
				}




			},
			async faddishAnalysisFn(id) {
				const result = await this.$http.post({
					url: this.$api.faddishAnalysis,
					data: {
						uid: uni.getStorageSync('uid'),
						task_id: id

					}
				});
				if (result.errno == 0) {

					if (result.data.content&&result.data.content[0]) {
						console.log(result.data)

						this.$sun.navGo('/pagesA/creatCenter/piecemeal/uploadStepsOne?objs=' + encodeURIComponent(JSON
							.stringify(
								result.data)))
					} else {
						this.$sun.toast('当前任务无文案无法编辑请重新创建', 'none')
					}

					console.log(result.data)

				} else {
					this.$sun.toast(result.message)
				}
			},
			async taskStatisFn() {
				const result = await this.$http.post({
					url: this.$api.taskStatis,
					data: {
						uid: uni.getStorageSync("uid"),
						type: 1
					}

				});
				if (result.errno == 0) {
					console.log(result.data)

					this.taskStatis = result.data


				} else {

					this.$sun.toast(result.message)
				}
			},



			navBack() {
				this.$sun.navSwitch('/pages/index/index')
			},
			changeTabbar(e) {
				console.log(e)
				if (e == 0) {
					this.$sun.navSwitch('/pages/index/index')
				}

			},
			async upCallback(scroll) {



				const result = await this.$http.post({
					url: this.$api.clipTaskList,
					data: {
						uid: uni.getStorageSync("uid"),


						type: 1,

						is_status: this.cIndex == 0 ? '' : this.cIndex - 1,

						page: scroll.num,
						psize: 10,
						name:this.name?this.name:''
					}
				});
				if (result.errno == 0) {

					this.mescroll.endByPage(result.data.list.length, result.data.total);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);


					for (const item of this.list) {
						
						console.log(item)
						if (item.is_status == 0) {
							const result = await this.$http.post({
								url: this.$api.faddishAnalysis,
								data: {
									uid: uni.getStorageSync('uid'),
									task_id: item.id

								}
							});
							if (result.errno == 0) {

                              
                              this.$nextTick(() => {
                              	this.mescroll.resetUpScroll();
                              });

								console.log(result.data)

							} else {
								// this.$sun.toast(result.message)
							}
						}

					}
				}

			},


			uploadNav(type) {
				console.log(type)
				if (type == 1) {


					this.$sun.navGo('/pagesA/creatCenter/piecemeal/localUpload')
				} else {
					this.$sun.navGo('/pagesA/creatCenter/piecemeal/networkUpload')

				}

			}

		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		height: 100vh;
		padding: 20rpx;
		position: relative;
		.search-content {
				    margin-top: 30rpx;
					background: #FFFFFF;
				
					// margin-bottom: 30rpx;
				
					
					height: 66rpx;
					border-radius: 230rpx;
				
					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				
					view {
						color: #fff;
					}
				
				}

		#barTitle {
			position: fixed;
			width: 750rpx;
			top: 0;
			left: 0;
			background: #fff;
			color: #000000;
			text-align: center;
			font-weight: bold;
			z-index: 9999
		}

		#barTitle>text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx
		}



		.icon {
			width: 56rpx;
			height: 56rpx;
		}

		.localImg {
			width: 345.88rpx;
			height: 154.88rpx;
		}

		.hotSellingList {
			margin-top: 30rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			position: relative;
			background: rgb(255, 255, 255);
			width: 709.7rpx;


			.yellowBtn {
				width: 77.92rpx;
				height: 40rpx;
				border-radius: 10rpx;
				background: linear-gradient(180.00deg, rgb(255, 229, 101), rgb(255, 241, 156) 100%);
			}

			.waterBtn {
				border-radius: 10rpx;
				width: 77.92rpx;
				height: 40rpx;
				background: linear-gradient(180.00deg, rgb(178, 246, 255), rgb(158, 223, 255) 100%);
			}

			.editImg {
				width: 32.18rpx;
				height: 32.18rpx;
			}

			.signColorG {
				color: #fff;
				width: 104rpx;
				height: 52rpx;
				border-radius: 0rpx 20rpx 0rpx 20rpx;
				position: absolute;
				background: rgb(17, 216, 65);
				right: 0;
				top: 0;
			}

			.signColorP {
				color: #fff;
				width: 104rpx;
				height: 52rpx;
				border-radius: 0rpx 20rpx 0rpx 20rpx;
				position: absolute;
				background: #6475FF;
				right: 0;
				top: 0;
			}

			.signColorR {
				color: #fff;
				width: 104rpx;
				height: 52rpx;
				border-radius: 0rpx 20rpx 0rpx 20rpx;
				position: absolute;
				background: #FF0000;
				right: 0;
				top: 0;
			}

			.signColorB {
				color: #fff;
				width: 104rpx;
				height: 52rpx;
				border-radius: 0rpx 20rpx 0rpx 20rpx;
				position: absolute;
				background: #00A8FF;
				right: 0;
				top: 0;

			}
		}

		.taskStatistics {
			margin-top: 25rpx;
			width: 709rpx;
			height: 154.88rpx;
			padding: 30rpx;

			border-radius: 20rpx;

			box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(1, 132, 240, 0.05);
			background: rgb(255, 255, 255);
		}
	}
</style>